<!--  -->
<template>
  <div class=''>
    <el-dialog
      title="退款"
      :visible.sync="dialogVisible"
      width="25%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label='退款日期'
          prop="refundDate"
        >
          <el-date-picker
            type="date"
            placeholder="退款日期"
            v-model="ruleForm.refundDate"
            style="width: 100%;"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
          label="退款流水号"
          prop="refundNumber"
        >
          <el-input
            v-model="ruleForm.refundNumber"
            placeholder='填写退款流水号'
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          @click="dialogVisible = false"
          icon="el-icon-circle-close"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="doSubmit"
          icon="el-icon-circle-check"
        >保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { UpdatePay } from '@/api/cothercost'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      dialogVisible: false,
      ruleForm: {
        type: 1,
        refundDate: '',
        refundNumber: ''
      },
      item: {},
      rules: {
        refundDate: [{ required: true, message: '请选择退款日期', trigger: 'change' },],
        refundNumber: [{ required: true, message: '请输入退款流水号', trigger: 'blur' },]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    doSubmit () {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.ruleForm.id = this.item.id
          UpdatePay(this.ruleForm).then(res => {
            this.dialogVisible = false
            this.$emit('refreshList')
          })
        } else {
          return false;
        }
      });
    },
    init (item) {
      this.item = item
      this.dialogVisible = true
    },
    handleClose () {

    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>